import React, { Component } from 'react';
import { connect } from 'dva';
import moment from 'moment';
import { Modal,Button, Form,Input,Icon,Select,DatePicker,Upload,Radio} from 'antd';
import {FFileUpload} from './../../public/components/index';

const FormItem = Form.Item;
const Option = Select.Option;
const RadioGroup = Radio.Group;
const { TextArea } = Input;

function <%=addRouter%>({dispatch,form,<%=addRouter%>}) {
    const  {visible,detail,country} = <%=addRouter%>;
    const { getFieldDecorator,validateFields,resetFields} = form;
    if(!visible){resetFields()} // 初始化表单数据

    function saveMenuHander() {
        validateFields(function (err,values) {
            values["date-picker"]=values['date-picker'] ? values['date-picker'].format('YYYY-MM-DD'):"";
            if(!err){
                Object.assign(detail,{values});
                dispatch({type: '<%=addRouter%>/add', payload:{detail:detail}});
            }else {
                console.info(err)
            }
        })
    }
    function hideModelHandler() {
        dispatch({type: '<%=addRouter%>/save', payload:{visible:false}});
    }
    const formItemLayout = {
        labelCol: {
            xs: { span: 4 },
            sm: { span: 4 },
        },
        wrapperCol: {
            xs: { span: 18 },
            sm: { span: 18 },
        }
    };
    const fileUploadProps = {
        accept: '',
        countLimit:1,
        labelText: '背景图',
        url:"/ffalconvip/textConfCms/v1/uploadFile",
        defaultList:[],
        getList: list => {
            let imgs = [];
            for (let i = 0; i < list.length; i++) {
                imgs.push(list[i].response.data);
            }
            detail.backimg=imgs.join('');
            dispatch({
                type: `<%=addRouter%>/save`,
                payload:{detail:detail}
            });
        }
    };
    return (
        <span>
          <Modal title={detail.id ? "编辑" : "新增"} visible={visible} onOk={saveMenuHander} onCancel={hideModelHandler}>
              <Form  onSubmit={saveMenuHander}>
                  <FormItem {...formItemLayout}  label="姓名">
                     {
                         getFieldDecorator('userName', { normalize:function (value, prevValue, allValues) {return value},initialValue:detail.name,rules: [{ required: true, message: '请输入你姓名!' }]})
                         (
                             <Input placeholder="Username" />
                         )
                     }
                  </FormItem>
                  <FormItem {...formItemLayout} label="性别">
                        {getFieldDecorator('sex',{initialValue:detail.sex,rules: [{required: true,message: '请选择你的性别!' }]})(
                            <RadioGroup>
                                <Radio value="1">男</Radio>
                                <Radio value="2">女</Radio>
                                <Radio value="3">人妖</Radio>
                            </RadioGroup>
                        )}
                  </FormItem>
                  <FormItem{...formItemLayout} label="开始时间">
                         {getFieldDecorator('date-picker', {initialValue:detail.timer ? moment(detail.timer,"YYYY-MM-DD HH:mm:ss"):"",rules: [{ type: 'object', required: true, message: 'Please select time!' }]})(
                             <DatePicker style={{width: "366px"}} showTime format="YYYY-MM-DD HH:mm:ss" />
                         )}
                  </FormItem>
                  <FormItem {...formItemLayout} label="爱好">
                   {getFieldDecorator('select', {initialValue:detail.select,rules: [{message: 'Please select time!' }]})(
                       <Select allowClear placeholder="请选择">
                           <Option value="1">篮球</Option>
                           <Option value="2">羽毛球</Option>
                           <Option value="3">足球</Option>
                       </Select>
                   )}
                  </FormItem>
                   <FormItem {...formItemLayout} label="国家">
                      {getFieldDecorator('select1', {initialValue:detail.country,rules: []})(
                          <Select allowClear mode="multiple" placeholder="请选择">
                              {
                                  country.map(function (data,index){
                                      return <Select.Option key={index+''} value={data.dome}>{data.dome}</Select.Option>
                                  })
                              }
                          </Select>
                      )}
                   </FormItem>
                   <FormItem {...formItemLayout} label="头像">
                         <FFileUpload  {...fileUploadProps}></FFileUpload>
                   </FormItem>
                   <FormItem {...formItemLayout}  label="描述">
                     {
                         getFieldDecorator('desc', { normalize:function (value, prevValue, allValues) {return value},initialValue:detail.desc,rules: [{ required: true, message: '请输入你姓名!' }]})
                         (
                             <TextArea placeholder="描述" />
                         )
                     }
                  </FormItem>
                  </Form>
          </Modal>
        </span>
    );
}
function mapStateToProps({<%=addRouter%>}) {
    return {<%=addRouter%>};
}
export default connect(mapStateToProps)(Form.create()(<%=addRouter%>));
